Web Designer Wall
UI Components

CSS Expandable Box: Fluid Cards That Grow With Their Content

By Aigars Silkalns Updated 10 min read

CSS Expandable Box: Fluid Cards That Grow With Their Content

An all-expandable box is a container that grows in every direction when its content, its text size or the viewport changes, without its corners, borders or shadows breaking apart. In 2007 that took four nested divs, one oversized background image and a lot of negative margins. Today it takes a few lines of CSS: size the box in em, let the content decide the height, and draw the decoration with border-radius, box-shadow or, for fancy frames, border-image.

This guide rebuilds the classic technique, originally contributed by Chris Coyier of CSS-Tricks, with modern CSS. It shows when you still need a sliced image frame, how intrinsic sizing, container queries and field-sizing take the idea further, and ends with one copy-paste demo that contains every example.

One honest caveat first: every modern browser now zooms the whole page, pixels included, so a box sized in px grows with Ctrl-plus just like an em box. Sizing in em still matters for text-only zoom and for people who raise the default font size in their browser settings, because those change em and rem but not pixels. That is the case this guide designs for.

Why the old technique existed

The original sliding-doors approach stacked four absolutely different background slices (top-left, top-right, bottom-left, bottom-right) of one big PNG so that rounded corners and shadows could survive a text-size change. It needed extra wrapper elements, fixed pixel heights for the bottom edge and a background image large enough to cover the biggest size you expected. Past that size it simply fell apart.

All of that existed because CSS could not round a corner or cast a shadow. It can now, and both effects are drawn by the browser at whatever size the box happens to be. There is no image to run out of.

Step 1: size the box in relative units

The old tutorial’s key insight still holds: if the width is expressed in em, it scales with the font size. Add min() so the box also shrinks on narrow screens, and use logical properties so it works in right-to-left and vertical writing modes.

.box {
  inline-size: min(100%, 35em);
  padding: 1.5em 2em;
  background: #fff;
  color: #1d2433;
}

Height is never set. Block-level content already grows vertically, so the box expands both ways: wider with the text size (until it hits 100% of its container) and taller whenever the text wraps onto more lines.

Step 2: draw the corners and shadows with CSS

Because the radius and the shadow offsets are also in em, the decoration scales with the box. Layer a tight contact shadow, a soft ambient shadow with a negative spread, and an inset shadow for the subtle inner depth the original image had.

.box {
  border-radius: 1em;
  box-shadow:
    0 0.1em 0.2em rgb(0 0 0 / 0.08),
    0 1em 2em -0.5em rgb(20 30 60 / 0.25),
    inset 0 0.1em 0.4em rgb(0 0 0 / 0.06);
}

Use a negative fourth value (the spread) on the large shadow to keep it from bleeding out sideways; it makes the shadow look like it falls beneath the box rather than around it.

The markup is now what the 2007 tutorial wished for: a single element, no decorative wrappers.

<div class="box">
  <h3>Fluid box</h3>
  <p>Content goes here.</p>
</div>

Step 3: test it with larger text

Set font-size: 1.5rem on the box, as in the middle example above, and everything keeps its proportions: the padding, the radius and the shadow all grow together. Because it is the box font size that drives the em values, you can also make a small or large variant of the component by changing one declaration.

.box.big { font-size: 1.5rem; }
The same white rounded boxes with the root font size at 200 percent in a narrow viewport: padding, corners and shadows have all scaled with the text
The same boxes with the root font size at 200% in a narrow viewport. Nothing overflows, and the padding, radius and shadows grew with the text.

Keep the page’s base font size in rem or percentages, never fixed pixels, so browser text-size preferences still flow into your layout. WCAG asks that text can be resized to 200% without loss of content or function (success criterion 1.4.4), so test your boxes at that size and with the browser zoomed to 400% (the reflow criterion, 1.4.10). The MDN reference for resize lists the exact values and the overflow requirement used below.

Step 4: let users resize it, if it makes sense

The original demo’s animation showed a box being stretched. CSS now has native support for that on any element with overflow other than visible:

.resizable {
  resize: both;
  overflow: auto;
  min-inline-size: 12em;
  max-inline-size: 100%;
}

A drag handle appears in the bottom corner. This is useful for notes, editors or chat panels, and a good way to stress-test a design: drag the corner and check that nothing overflows or collides. Always set minimum and maximum sizes so the box cannot be dragged to nothing.

Step 5: when you still want an image frame

Gradients, shadows and radii cover most boxes. For a custom frame, such as a hand-drawn border, a ticket edge or a pixel-art panel, use border-image. It slices one image into nine regions: the four corners stay at a fixed size, the edges stretch or repeat, and the middle can fill the background. That is the sliding-doors idea built into the browser, with one image and no extra elements.

The frame needs a small source image. This SVG is a complete 30 by 30 rounded outline; the 12 unit corners are the slices that stay fixed:

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <rect x="1.5" y="1.5" width="27" height="27" rx="9"
        fill="none" stroke="#2f6fe4" stroke-width="3"/>
</svg>

Inline it as a data URI in a custom property, which avoids an extra request and keeps the frame in one rule:

.frame {
  --slice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='1.5' y='1.5' width='27' height='27' rx='9' fill='none' stroke='%232f6fe4' stroke-width='3'/%3E%3C/svg%3E");
  border: 12px solid transparent;
  border-image: var(--slice) 12 fill / 12px;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 1.25em 1.5em;
}

The number after the URL is the slice offset in image units (for SVG, the image’s own coordinates), the value after the slash is the border width the slices are painted at, and fill paints the centre slice behind the content. Two things to remember. First, border-radius has no effect on the border image: per MDN, the image can be placed outside the border box, so it is never clipped by the radius, while the element’s background still is. Bake round corners into the image, as the SVG above does, and reset the radius, shadow and background on the frame as shown. Second, the slice has to match the corner size you give the border.

An SVG is usually the best source because it stays sharp on high-density displays and is only a few hundred bytes.

Step 6: let the content and the container decide

Three newer tools make a box adapt without you picking widths at all.

Intrinsic sizing. inline-size: fit-content makes the box as wide as its content, capped by the space available. Combine it with a floor and a ceiling, and use clamp() for padding that scales sensibly. max-content and min-content are the two extremes it sits between.

.hug {
  inline-size: fit-content;
  min-inline-size: 12em;
  max-inline-size: min(100%, 35em);
  padding: clamp(0.75em, 3cqi, 2em);
}

Container queries. Media queries ask about the viewport; a card in a sidebar needs to ask about its own slot. Declare a container with container-type: inline-size, then query it with @container and size things with cqi, which is 1% of the container’s inline size. Size container queries are Baseline and have worked in all major browsers since early 2023.

.slot { container-type: inline-size; }
.card { padding: clamp(0.75em, 4cqi, 2em); }
@container (inline-size > 30em) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}

Note that the container itself cannot be restyled by its own query, so put the container on a wrapper and the adapting styles on its child.

Auto-growing fields. field-sizing: content makes a textarea or input size itself to what has been typed, with no JavaScript. MDN lists it as Baseline 2026 (newly available since June 2026), so provide a sensible min-block-size and max-inline-size and treat it as an enhancement for older browsers.

textarea {
  field-sizing: content;
  min-inline-size: 12em;
  max-inline-size: 100%;
  min-block-size: 3lh;
}

The complete demo

Here is everything in one file: the em box, the 1.5x variant, the resizable box, the sliced frame, the adaptive container-query card (drag its right edge) and the hugging box with an auto-growing textarea. Save it as an HTML file and open it.

<title>Expandable box demo</title>
<style>
:root{--paper:#fff;--ink:#1d2433;--accent:oklch(62% .19 255);--bg:oklch(94% .02 255)}
*{box-sizing:border-box}
body{margin:0;padding:1.5rem;background:var(--bg);color:var(--ink);font:100%/1.5 system-ui,sans-serif}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:1.5rem;align-items:start}
.label{font:600 .8rem/1 system-ui;text-transform:uppercase;letter-spacing:.08em;color:#566;margin:0 0 .75rem}
.box{
  inline-size:min(100%,35em);
  padding:1.5em 2em;
  background:var(--paper);
  color:var(--ink);
  border-radius:1em;
  box-shadow:0 .1em .2em rgb(0 0 0/.08),0 1em 2em -.5em rgb(20 30 60/.25),inset 0 .1em .4em rgb(0 0 0/.06);
}
.box h3{margin:0 0 .4em;font-size:1.25em}
.box p{margin:0}
.big{font-size:1.5rem}
.resizable{resize:both;overflow:auto;min-inline-size:12em;max-inline-size:100%}
.hug{inline-size:fit-content;min-inline-size:12em;max-inline-size:min(100%,35em);padding:clamp(.75em,3cqi,2em)}
.frame{
  --slice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='1.5' y='1.5' width='27' height='27' rx='9' fill='none' stroke='%232f6fe4' stroke-width='3'/%3E%3C/svg%3E");
  border:12px solid transparent;border-image:var(--slice) 12 fill/12px;border-radius:0;box-shadow:none;background:none;padding:1.25em 1.5em
}
.slot{container-type:inline-size;resize:horizontal;overflow:auto;inline-size:100%;max-inline-size:40em;min-inline-size:12em}
.card{display:grid;gap:.75em;padding:clamp(.75em,4cqi,2em);background:#fff;border-radius:1em;box-shadow:0 1em 2em -.5em rgb(20 30 60/.25)}
.card h3{margin:0;font-size:clamp(1.1rem,4cqi + .5rem,1.75rem)}
.card p{margin:0}
@container (inline-size > 30em){.card{grid-template-columns:auto 1fr;align-items:center}}
.card i{display:block;inline-size:3.5em;aspect-ratio:1;border-radius:.75em;background:var(--accent)}
.gap{margin-top:1.5rem}
.narrow{max-inline-size:26em}
.note{field-sizing:content;min-inline-size:12em;max-inline-size:100%;min-block-size:3lh;padding:.5em .75em;border:1px solid #9aa;border-radius:.5em;font:inherit}
</style>
<body>
<div class="row">
<div><p class="label">Default size</p><div class="box"><h3>Fluid box</h3><p>Width, padding, radius and shadows all use em, so the whole box scales with the text.</p></div></div>
<div><p class="label">Text size 1.5x</p><div class="box big"><h3>Fluid box</h3><p>Width, padding, radius and shadows all use em, so the whole box scales with the text.</p></div></div>
<div><p class="label">Drag the corner</p><div class="box resizable"><h3>Resizable</h3><p>Content reflows and the box keeps its proportions.</p></div></div>
</div>
<p class="label gap">border-image 9-slice frame</p>
<div class="box frame narrow"><h3>Sliced frame</h3><p>One small SVG stretches to any size; the corners stay crisp.</p></div>
<div class="row gap">
<div><p class="label">Container query (drag the edge)</p><div class="slot"><div class="card"><i></i><div><h3>Adaptive card</h3><p>Stacks when narrow, goes side by side when its container is wider than 30em.</p></div></div></div></div>
<div><p class="label">Hugs content, grows with typing</p><div class="box hug"><h3>Hug</h3><p><textarea class="note" aria-label="Note">Type here and the field grows.</textarea></p></div></div>
</div>
</body></html>

Old technique versus modern CSS

Need 2007 approach Today
Rounded corners Four corner slices of a PNG border-radius
Drop and inner shadow Baked into the background image box-shadow, including inset
Grows with text size Width in em plus negative margins Width in em or min(), padding in em
Custom decorative frame Sliding doors with nested divs border-image 9-slice
Adapts to its slot Media queries and fixed widths Container queries and cqi
Auto-growing field JavaScript height scripts field-sizing: content
User-resizable JavaScript drag handles resize: both
Extra markup Four or more wrapper elements One element

Accessibility and robustness checklist

  • Never set a fixed height on a box that holds text; use min-block-size if you need a floor.
  • Do not rely on a shadow to show where a box ends; keep sufficient contrast between the box and its background, or add a thin border.
  • Test at 200% text size and at 400% zoom, and in a narrow 320px viewport.
  • If you use resize, keep the handle reachable and avoid placing resizable boxes where they could cover other controls.
  • Test with forced-colors (Windows high contrast). The CSS Color Adjust spec forces colour properties such as background-color and border-color to the user’s palette, so do not depend on a fill or shadow colour to mark where a box ends. The spec does not describe how border-image is treated, so check your frame in a forced-colors browser and keep a real border as the fallback.

Where to go next

The same principles of fluid, content-driven sizing apply across your layouts. See Responsive Column Layouts for scaling grids, Master CSS Flexbox in 5 Simple Steps for boxes that distribute space, and CSS3 Image Styles for more border and shadow treatments. For ready-made cards built on these ideas, browse the Billing Summary Card and Coupon Card snippets.

Free snippets for this topic

Ready-made Bootstrap 5 components with live preview and copy-ready code.

All card snippets
82 comments from the archive

  1. yeah, rounded corners, good illustrated!
    the last three days i fight with the IE6 PNG Problems… :) I’ll habby that works now on my new page… puh…

  2. This is nice though, I gonna apply this on my XHTML and CSS website projects.

    Thanks for this tutorial Nick! Keep up the good work :)

  3. Good techinque!
    But it’s not good to put block “div” into inline “span”, it’s not valid. Perhaps, will be better to use “div”, if we want to use block elements inside “topright”.

  4. Bad example, you can’t put a block level element (a div) inside of an inline level element – a span. Also it is not good having two completely empty non-semantic elements. Check out this article I wrote some time ago (it’s in Serbian, but the example is what you’ll be interested in), I am using a definition list to mark up a comment (just as an illustration) that is as semantic as possible and uses as little markup as possible.

  5. “But it’s not good to put block “div” into inline “span”, it’s not valid.” +1 but I prefer sliding doors !

  6. Good example although I’m not a fan of using none semantic markup I can understand that achieving this any other way is near impossible without CSS3 or other technologies.

  7. OK – up to a point. If the text size gets to large then the whole thing ends up looking like a dogs breakfast. Tested on Windows in Firefox, IE7

  8. Firefox 3 is not the only one to scale everything when increasing the text size, ie7 and opera 9 do the same. I think the zoom thing must be achieved by browsers, this code is not semantic at all. Interesting experiment anyway.

  9. Very nice, but it breaks in Safari 3 at a certain point. (keep enlarging the text..)

  10. Yeah I kind of agree with the rest of the crowd about the placing of a block level element into an inline level element. That isn’t valid HTML/XHTML. Interesting idea though.

  11. why bother with the spans? with that content, you’ve got four hooks, which is all you need for an expandy box with unique corners

  12. I agree with the comments about the valid code and empty spans. I’ve utilized similar techniques using all divs but found the excessive code to be messy.

    The best solution is to write javascript to add in the extra divs, keeping the html code simple and just living with the fact that if js is off then it won’t be as cool…

  13. It does not work when zooming too large or too small in FF, or when using a large image in the content.

  15. The example page broke at three expansions, using Firefox 2 on XP.

    Screenshot sent on request.

  16. As I think someone said before be, Opera (latest I think) and IE7 also increases everything, instead of just font. (note that it says “zoom” instead of text size)..

    Pretty interesting code though, great tutorial :)

  17. It breaks after two resizes on gecko browsers…

    (This is what happens when you don’t test on other platforms and browsers as well)

  18. Its list elements.
    It’s = it is, and “as it needs to be to fit all of it is list elements” is probably not what you meant to say.

  19. I just replicated your box, but I had to adjust the top-right corner left-margin as it was too far away from the left border because it started to show in the the top-left corner. Maybe is the image, I had to give enough margin (15px) to set the drop shadows. Still not exactly like your tutorial but is a good start, this is in IE6. Great tutorial by the way!

  22. …if you don’t specify a specific width, block-level elements are vertically expandable…

    Should that read “a specific height“

  24. This is a workable solution. Probably the best supported solution. However, it’s less than ideal because it breaks semantics and fuddles up your code with divs strictly devoted to visual presentation.

    There is a way to do this with a div, or p, and no additional markup. Unfortunately, because of flaky CSS 2 support amongst browsers, it doesn’t always work. The trick is using the :before and :after pseudo selectors along with generated content (via the css content attribute).

  25. div.bottomright error in my ie7,but the idea is very nice ! I will try it. thanks

  26. Heres a question how could you create a hole site to expanded with the text size of different users. Example on my site if the user was to change the text size, making it bigger then it well push down and overlap the design which look very bad.
    How would you solve something like that , or in general what would be the best way to make a site that well work in all browser size , screen size and text size’s?
    Would love to ideas or comments via email at [email protected]

  27. yeap, it’s cool. but it doesn’t work on IE7 and it breaks in firefox after 3 steps. Thanks for sharing.

  28. I also noticed it doesn’t work in ie7, the bottom right div brakes apart. But I have a simple fix, not tested this on other browsers so let me know if this works on anything other than ie7. Here it is:-

    Add the following “margin-top:-0;” as in the CSS below:-

    .box div.bottomright {
    display: block;
    background:url(“images/box-bg.png”) bottom right no-repeat white;
    height: 45px;
    margin-left: 3.0em;
    margin-top:-0;
    }

  30. Would be great to say why you actually use em’s for making a layout like this.

    1em = 100% of the computer’s font-size. Usually the default font-size is 16px, so 1em = 16px. By using em’s instead of pixels, you can really reach every configuration.

  31. Doesn’t work everywhere. Stop claiming that it does.

    Secondly, Dear Andrew. We do not use negative margin in the professional world. Even if you are applying a negative margin to a zero value… which makes no sense in the first place.

  32. Yep – looks like crap in IE7.
    I always cross (browser) check things before posting for public view…

  35. Hey guys!

    I must say nick I have been a huge fan of your sites for a couple years now, and am always impressed with the content, tutorials and discussion on this site, so please keep up the good work. Been getting people to visit your site as well for their web and applications tutorials as well, and you got me into Considering WordPress as a viable CMS for a site I am coordinating.

    I had a question about this tutorial: What i basically want to do is combine this tutorial with the CSS Web gallery example you have created most recently. I want to be able to apply border treatments to images that range in size, which would give me the ability to apply the border to an image of any size and not have to do it in photoshop. Was wondering if this was possible. I am thinking that you do the CSS sprites technique talked about in this tutorial, but lay the border over top of the image, using transparent PNGs. If you could email me with some suggestions or any resources that would be great.

    Thanks for a great site

    N.P (Joker101_np(at)yahoo.com

  36. Kindly check it on IE 6.0, there is some bug with expandable box.

  37. This has been tested in Firefox, Safari, Opera, and IE 6 and is working in all of them, so I’m fairly satisfed it’s a solid technique.

    I’m using Safari 3.1.2 running on OS X v10.4.11 and the box is gaining an extra left side and bottom edges after using Cmd + until the text has expanded to its limit.

    Great site by the way, I’m learning a lot from your tutorials, thanks for the work you’ve put in so far.

    Cheers
    Owin (U.K.)

  38. The box is ok under Firefox2 and MSIE6 but the image border is white instead of be transparent, any idea?

  39. Thank you for your code but Doesn’t work in IE 7. Now i am try to correct that.

  40. I was wondering if any of you designers/front-end coders have a good example of a project timeline or a good estimate of how long the front-end code takes to build. The site is probably going to contain 3-4 different sub-page layouts and maybe 100 to 200 total pages. I use table-less (X)HTML and good current CSS. I just started a new job with full responsibility for redesigning and rebuilding the entire web site. I’m bad just at figuring out how long it takes to drive to work or get a cup of coffee, much less how many minutes per page I’ll spend!

  44. fix for IE is to give div.bottomright style 0px on top margin….however the great expanding box cannot handle this
    expandabilityexpandabilityexpandabilityexpandabilityexpandabilityexpandabilityexpandability

  46. I increased the font size with FF, and it breaks. I edited the page with Firebug also, and put more text. It breaks again.

  47. Thanks a lot Guys. U are doing the great job. This is what I looking before.
    Really useful, nice and cool ever. Nice tutorial sure easy to understand. I must show all this to my group. Keep in touch.

  48. Seriously, who gives a flip it “breaks semantics.” In a perfect world maybe. And plenty of professionals use negative margins.

    Not saying if it does or doesn’t, but I only care if it works, and works cross-browser.

  50. Nice example. For those having problems in IE7, add a margin-top:0; (or your favorite shorthand equivalent) to .box div .bottomright.

    Also suggest using strict doctype (mine appears off page to the left with transitional). To use strict, replace the doctype with: DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
    and add this to the head section: meta http-equiv="Content-Type" content="text/html;charset=utf-8" .

  52. This is probably the best way to do the rounded corners with divs and css. Unfortunately, it is not infinitely expandable, and will break down the larger it gets. The larger you need the box, the more image data needs to be sent. The best infinite rounded box that will work in ie7 is this:
    .lcrt div,.rcrt div,.lcrb div,.rcrb div{ width:15px; height:20; background-image: url(images/box.png); background-repeat:no-repeat;}
    .lcrt div{ background-position:0 0;}
    .rcrt div{ background-position:100% 0;}
    .lcrb div{ background-position:0 100%;}
    .rcrb div{ background-position:100% 100%;}

     

     

     

     

  53. The designs showed here show what simple and tasteful design is all about. Another one to consider

  54. Kindly check it on IE 6.0, there is some bug with expandable box.

    anyway Nice trick!

  55. nice trick. I don’t think it matters about lack of IE6 support, considering recent revelations of IE6 being a security issue. The more we continue to support this old browser the longer it will take to disappear for good.

  56. Great, but why does the background box on THIS page stops halfway through the text and never gets close to the bottom of the page? Oh, and the comments don’t seem to fit in the comments boxes if over 2 lines. Viewed with IE8 btw. Nice to find free css tuts though. Thanks

  57. Hey Chris,
    this is very useful piece of work. Top!
    I certainly intend to start applying the expandable box. But what I am even more impressed with is the actual design of your example box. I am new at the webdesigner thing and even more so at Photoshop, but I have been trying to design exactly such a box in Ps. I’m afraid I am not up to it yet. Is there any chance your could explain how it is done, or share the .psd even? I’d like to play around with it, change some background/foreground colors etc. (or is there a way to do that in CSS?).
    There you have it: you give them a superb tutorial, and all they ask for is MORE!!! :-)
    Thanks, mate!

  58. Hmm i tried this but i dont really get where to put the bottom text the “style” anyone knows where and could maybe show a example, cause im really new at this

  59. Tobbe, it’s CSS. You’re not going to be able to make rounded corners with raw HTML…

  61. Any ideas how you can make it work without the DOCTYPE and HTML NS tags (tested it and its breaking in IE 8)?

  62. If the box comes to be higher than 700px, you’ll have a problem. If your design uses a png with transparency and a fancy border, the image will be very big for some low bandwidth. Any ideas of another method that would overcome these situations?

  63. Thanks chris. Nice and good tutorial. another one of the best rounded css box
    Let me try..

  64. Hey guys can anyone help? I have added this to my site and it’s working perfectly except it seems for some reason that the width is limited? I am using it within wordpress and using a box like this to hold the checkout. But the checkout is going over the right hand side of the box?

    Thanks in advance!

    Gary

  65. great stuff…it would be nice if it also work for patterned/image backgrounds, as some very ugly part of the images appear when the default plain white background is deleted.

  66. You guys that do these free tutorials are studs! Man I wish I had the time to go through just 1/100,000th of them out there. I am currently in college (at 48 and I grad. in 2012 w/BAS in web dev) and the professor linked us here to check out different CSS methods. I’m a noob, but in time I hope to catch up to you guru’s and then maybe I will contribute. For now I just want to say thank you.

    Don G

  67. I am using it within wordpress and using a box like this to hold the checkout

  68. In the third part of the test I’m shooting an object from a pretty close distance (15 cm). Here you can really see a big difference between the different cameras and if you compare the 3G with the white iPhone 4 side by side you can see that they are miles apart.

  69. Apple’s launch of the iPhone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

  70. I am learning CSS in depth and this is what that can help me a lot. Your this tutorial about expanding box is really appreciated and helpful.

    Los Angeles Web Design

  71. You guys that do these free tutorials are studs! Man I wish I had the time to go through just 1/100,000th of them out there. I am currently in college (at 48 and I grad. in 2012 w/BAS in web dev) Hcg Damla and the professor linked us here to check out different CSS methods. I’m a noob, but in time I hope to catch up to you guru’s and then maybe I will contribute. For now I just want to say thank you

  72. I’ve been studying CSS and web design lately and must say: this entire page is a work of art! So many aesthetically pleasing great ideas, and still perfectly readable without styling. Understanding its components would be worth a couple semesters in college!

  73. It has breakage in i.e. 6 and 7 and does not grow with text size growth. boo.

  75. Interestingly WAI accessibility guidelines say that for an increase in font size above 200% expansion in both dimensions is necessary. Emastic is an excellent CSS grid that allows the use of em or % measures for width which means that the whole latout grows with the text. I hope it is OK to post a link to this here: https://code.google.com/archive/p/emastic

  76. Thx man! But the use of the div selector in the CSS is not nessasary. I know.. I’m a bit of a perfectionist.. :P

  79. Is there a way to move the box away from center? Like to the right for instance? I havent had much luck…

  80. Interestingly WAI accessibility guidelines say that for an increase in font size above 200% expansion in both dimensions is necessary. Emastic is an excellent CSS grid that allows the use of em or % measures for width which means that the whole latout grows with the text.

  81. I find this method to be very inconsistent across all browser, but nice explanation and write up.

  82. hi
    i really like this code
    i needed it badly
    thanks for sharing
    keep it up

Comments are closed on this article.